<template>
  <div style="width: 100%">
    <div class="video-head">
      <span
        v-for="(item, index) in videoType"
        :class="videoActive == index ? 'active' : ''"
        :key="item"
        @click="onVideo(index)"
        >{{ item.name }}</span
      >
    </div>
    <div class="video-list">
      <div
        class="video-item"
        v-for="(item, index) in list"
        @click="toDetail(item)"
        :key="index"
      >
        <div class="top">
          <video
            v-if="item.shipin && item.shipin.length"
            :src="item.shipin[0].filePath"
            controls
          ></video>
          <p class="upload-date">更新于{{ item.createTime }}</p>
        </div>
        <div class="bottom">
          <p class="title">{{ item.zhengwenmiaoshu }}</p>
          <div class="avatar-like">
            <div class="avatar">
              <img
                v-if="item.touxiang && item.touxiang.length"
                :src="item.touxiang[0].filePath"
                alt=""
              />
              <span>{{ item.nicheng }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h-page
      v-if="total"
      v-model:curr-page="params.current"
      :size="params.size"
      :total="total"
      @change="GetList"
    />
  </div>
</template>
<script setup>
import { ref, defineProps, watch } from "vue";
import {
  GetMyDeployVideo,
  GetMyFollowVideo,
  GetMyLikeVideo,
  GetMySaveVideo,
} from "@/api/user";

const props = defineProps({
  yhNo: {
    type: String,
    default: "",
  },
});
// 用户视频
const videoActive = ref(0);
const videoType = [
  { name: "我发布的", value: 0 },
  { name: "关注", value: 1 },
  { name: "赞过", value: 2 },
  { name: "收藏", value: 3 },
];
const list = ref([]);
const total = ref(0);
const params = ref({
  yhNo: props.yhNo,
  current: 1,
  size: 10,
});
const onVideo = (index) => {
  videoActive.value = index;
  params.value.current = 1;
  params.value.size = 10;
  if (index == 0) {
    GetMyDeployVideo(params.value).then((res) => {
      if (res.code == 4201) {
        list.value = res.data.records;
        total.value = res.data.total;
      }
    });
  }
  if (index == 1) {
    GetMyFollowVideo(params.value).then((res) => {
      if (res.code == 4201) {
        list.value = res.data.records;
        total.value = res.data.total;
      }
    });
  }
  if (index == 2) {
    GetMyLikeVideo(params.value).then((res) => {
      if (res.code == 4201) {
        list.value = res.data.records;
        total.value = res.data.total;
      }
    });
  }
  if (index == 3) {
    GetMySaveVideo(params.value).then((res) => {
      if (res.code == 4201) {
        list.value = res.data.records;
        total.value = res.data.total;
      }
    });
  }
};
// 我发布的
const GetList = () => {
  onVideo(videoActive.value);
};
GetList();
</script>
<style scope lang="scss">
.video-head {
  margin-top: 20px;
  span {
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    &:not(:first-child) {
      margin-left: 40px;
    }
    &.active {
      color: skyblue;
    }
  }
}
.video-list {
  display: flex;
  padding: 20px 0px;
  flex-wrap: wrap;
  .video-item {
    width: calc((100% - 120px) / 5);
    border: 1px solid #ccc;
    &:not(:nth-child(5n + 1)) {
      margin-left: 20px;
    }
    &:not(:nth-child(-n + 5)) {
      margin-top: 20px;
    }
    .top {
      position: relative;
      height: 288px;
      padding-top: 20px;
      video {
        margin-top: 20px;
        height: 240px;
        width: 100%;
      }
      .upload-date {
        position: absolute;
        top: 2px;
        right: 10px;
        font-size: 12px;
        color: #000;
        text-align: right;
      }
    }
    .bottom {
      font-size: 13px;
      color: #000;
      margin: 10px;
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
      .avatar-like {
        display: flex;
        justify-content: space-between;
        .avatar {
          margin-top: 10px;
          display: flex;
          img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
          }
          span {
            line-height: 25px;
            margin-left: 3px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
